<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      :router="true"
      style="--el-menu-hover-bg-color: white;--el-menu-active-color: red;--el-menu-hover-text-color: red"
  >
    <img src="../../assets/images/logo.png" height="65px" width="65px"/>
    <el-menu-item index="/main/homePage">首页</el-menu-item>
    <el-menu-item index="/main/searchProduct">汉服搜索</el-menu-item>
    <el-menu-item index="/main/typePopularization">汉服种类科普</el-menu-item>
    <el-menu-item index="/main/shopRecommended">汉服店铺推荐</el-menu-item>
    <el-menu-item index="/main/shoppingCart">我的购物车</el-menu-item>
    <el-menu-item index="/main/pastOrder">历史订单</el-menu-item>
    <div class="flex-grow" />
    <el-dropdown style="margin-right: 30px;">
      <span style="outline: none;margin-top: 10px;">
        <el-avatar :src="'http://localhost:8080/api/file/' + userImage"></el-avatar>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu style="--el-dropdown-menuItem-hover-color: rgb(245,108,108);--el-dropdown-menuItem-hover-fill: rgb(254,240,240)">
          <el-dropdown-item @click="changeSelf">修改个人信息</el-dropdown-item>
          <el-dropdown-item @click="leave">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-menu>
  <el-dialog
      title="个人信息修改"
      v-model="dialogVisible"
      width="400"
  >
    <el-from>
      <el-form-item>
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/file/upload"
            :show-file-list="false"
            :on-success="response => handleAvatarSuccess(response)"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
            style="display: block;margin: 0 auto"
        >
          <img v-if="dialogForm.customerHeadImage" :src="'http://localhost:8080/api/file/' + dialogForm.customerHeadImage" class="avatar" width="178px" height="178px" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input style="width: 300px" v-model="dialogForm.customerUsername" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input style="margin-left:15px;width: 300px" v-model="dialogForm.customerPassword" type="password"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="dialogForm.customerGender" style="margin-left: 20px">
          <el-radio :value="'女'">女性</el-radio>
          <el-radio :value="'男'">男性</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
            v-model="dialogForm.customerBirthday"
            type="date"
            placeholder="Pick a date"
            clearable
            style="margin-left: 15px;width: 300px"
        />
      </el-form-item>
      <el-form-item>
        <el-button style="display:block;margin:0 auto" type="danger" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-from>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox, UploadProps} from "element-plus";
import router from "../../router/router";
import {userApi} from "../../api/app.js";

const userImage = ref();

onMounted(() => {
  userImage.value = JSON.parse(localStorage.getItem('user')).customerHeadImage;
})

const activeIndex = ref('/main/homePage')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 离开系统
const leave = () => {
  ElMessageBox.confirm(
      '您确定要离开嘛？', '危险操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:'warning'
      }).then(() => {
    // 2.去掉全局变量并跳转到登陆页面
    localStorage.removeItem('user');
    router.push('/login');
    ElMessage({
      type: 'success',
      message: '退出登录成功！'
    })
  })
}

const dialogVisible = ref(false);
const dialogForm = ref();
const changeSelf = () => {
  dialogVisible.value = true;
  dialogForm.value = JSON.parse(localStorage.getItem('user'));
}

const onSubmit = () => {
  userApi.changeSelf(dialogForm.value).then(response => {
    localStorage.setItem('user',JSON.stringify(dialogForm.value));
    ElMessage({ message: '修改成功！',type: 'success' });
    userImage.value = dialogForm.value.customerHeadImage;
    dialogVisible.value = false;
  })
}

// 头像上传
// 上传成功
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
  console.log(response);
  dialogForm.value.customerHeadImage = response;
}
// 上传失败
const handleAvatarError = (err, file, fileList) => {
  // 提示成功
  ElMessage({
    message: '修改失败！',
    type: 'error',
  });
}
// 上传图片前的格式校验
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<style>

.flex-grow {
  flex-grow: 1;
}
</style>
